<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">员工添加</h4>
            </div>
            <div class="modal-body">
                <form id="submit" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <input type="text" name="lastName" class="form-control" id="empName_add_input"
                                   placeholder="lastName">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_add_input"
                                   placeholder="email@atguigu.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_add_input" value="1" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_add_input" value="0"> 女
                            </label>
                        </div>
                    </div>
                    <!--   <div class="form-group">
                           <label class="col-sm-2 control-label">deptName</label>
                           <div class="col-sm-4">
                               &lt;!&ndash; 部门提交部门id即可 &ndash;&gt;
                               <select class="form-control" name="dId">
                               </select>
                           </div>
                       </div>-->
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
            </div>
        </div>
    </div>
</div>


<!-- 员工修改的模态框 -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabelUpdat">员工添加</h4>
            </div>
            <div class="modal-body">
                <form id="submitUpdat" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <input type="text" name="lastName" class="form-control" id="empName_update_input"
                                   placeholder="lastName">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_updat_input"
                                   placeholder="email@atguigu.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_updat_input" value="1"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_updat_input" value="0"> 女
                            </label>
                        </div>
                    </div>
                    <!--   <div class="form-group">
                           <label class="col-sm-2 control-label">deptName</label>
                           <div class="col-sm-4">
                               &lt;!&ndash; 部门提交部门id即可 &ndash;&gt;
                               <select class="form-control" name="dId">
                               </select>
                           </div>
                       </div>-->
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">保存</button>
            </div>
        </div>
    </div>
</div>


<!-- 搭建显示页面 -->
<div class="container">
    <!-- 标题 -->
    <div class="row">
        <div class="col-md-12">
            <h1>SSM-CRUD BY PL</h1>
        </div>
    </div>

    <!-- 按钮 -->
    <div class="row">
        <div class="form-group col-md-12 ">
            <form action="http://localhost:8080/srpingMVC/employeeCrud" method="get">
           用户名： <input type="text" id="selectVal" name="lastName">
           邮箱： <input type="text" id="selectVal2" name="email">
            <input value="查询" type="submit" id="select_btn">

            </form>



        </div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
            <button class="btn btn-danger" id="emp_delete_modal_btn">删除</button>
        </div>
    </div>
    <!-- 显示表格数据 -->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover">
                <tr>
                    <th>
                        <input type="checkbox" id="check_all"/>
                    </th>
                    <th style="color: blue">id</th>
                    <th>lastName</th>
                    <th>email</th>
                    <th>gender</th>
                    <th>options</th>
                </tr>

                <tr th:each="employee : ${pageInfo.list}">
                    <td><input type='checkbox' class='check_item'/></td>
                    <td th:text="${employee.id}"></td>
                    <td th:text="${employee.lastName}"></td>
                    <td th:text="${employee.email}"></td>
                    <td th:text="${employee.gender}==0 ? '女':'男'"></td>
                    <th>
                        <button class="btn btn-primary btn-sm" id="update_btn">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                            编辑
                        </button>
                        <button class="btn btn-danger btn-sm " id="delet_btn" th:delete_id="${employee.id}">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                            删除
                        </button>
                    </th>
                </tr>

            </table>
        </div>
    </div>

    <!--     显示分页信息 -->
    <div class="row">
        <!--分页文字信息  -->
        <!--            <div class="col-md-6" th:text="'当前' + ${pageInfo.pageNum } + '页''总共'+ ${pageInfo.pages }+'页' +'总' + ${pageInfo.total } +'条记录'"  ></div>-->
        <div class="col-md-6"
             th:text=" '当前页码为 ：' + ${pageInfo.pageNum }+ '页' +' ， 总共'+ ${pageInfo.pages }+'页' +' ， 总共：' + ${pageInfo.total } +'条记录'"></div>
        <!-- 分页条信息 -->
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <!--第一页-->
                    <li><a th:href="@{/employeeCrud?pn=1}">首页</a></li>
                    <!--向后翻一页 pageInfo.pageNum 为当前页码-->
                    <li th:if="${pageInfo.hasPreviousPage }">
                        <a th:href="@{/employeeCrud?pn=}+${pageInfo.pageNum - 1 }"
                           aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <!--遍历显示的页码navigatepageNums ，然后进行判断如果li标签变量的页码是当前页就加一个class变色的属性，下面的a标签就对应条件的显示为可跳转和不可跳转-->
                    <li th:each="page_Num : ${pageInfo.navigatepageNums}"
                        th:class="${pageInfo.pageNum } == ${page_Num} ? 'active':'active1'">  <!--这里使用到了th解析器的三元运算符-->
                        <a th:if="${pageInfo.pageNum } != ${page_Num}" th:href="@{/employeeCrud?pn=}+${page_Num}"
                           th:text="${page_Num}"></a>
                        <a th:if="${pageInfo.pageNum } == ${page_Num}" href="#" th:text="${page_Num}"></a>
                    </li>

                    <!--后一页-->
                    <li th:if="${pageInfo.hasNextPage }">
                        <a th:href="@{/employeeCrud?pn=}+${pageInfo.pageNum + 1 }" aria-label="Next"> <span
                                aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <!--最后一页-->
                    <li><a th:href="@{/employeeCrud?pn=}+${pageInfo.pages}">末页</a></li>

                </ul>
            </nav>
        </div>
    </div>
</div>


<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/jquery-1.12.4.min.js}"></script>
<link
        th:href="@{/static/js/bootstrap-3.3.7-dist/css/bootstrap.min.css}"
        rel="stylesheet">
<script
        th:src="@{/static/js/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>

<script type="text/javascript" th:inline="javascript">


    //点击新增按钮弹出模态框。
    $("#emp_add_modal_btn").click(function () {
        //清除表单数据（表单完整重置（表单的数据，表单的样式））
        // reset_form("#empAddModal form");
        //s$("")[0].reset();
        //发送ajax请求，查出部门信息，显示在下拉列表中
        // getDepts("#empAddModal select");
        //弹出模态框
        $("#empAddModal").modal({
            backdrop: "static"
        });
    });


    //1、显示校验结果的提示信息。把这个方法抽取出来
    function show_validate_msg(ele, status, msg) {
        //清除当前元素的校验状态parent()为查找父元素，parents()为查找上面所有父元素及祖先元素，可以通过标签进行过滤，参考：let find = $(this).parents("tr").find("td:eq(1)").text();
        $(ele).parent().removeClass("has-success has-error");
        $(ele).next("span").text("");
        if ("success" == status) {
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg);
        } else if ("error" == status) {
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg);
        }
    }


    //校验表单数据
    function validate_add_form() {
        //1、拿到要校验的数据，使用正则表达式
        var empName = $("#empName_add_input").val();
        var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
        if (!regName.test(empName)) {
            //alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");
            show_validate_msg("#empName_add_input", "error", "用户名可以是2-5位中文或者6-16位英文和数字的组合");
            return false;
        } else {
            show_validate_msg("#empName_add_input", "success", "");
        }
        ;

        //2、校验邮箱信息
        var email = $("#email_add_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!regEmail.test(email)) {
            //alert("邮箱格式不正确");
            //应该清空这个元素之前的样式
            show_validate_msg("#email_add_input", "error", "邮箱格式不正确");
            /* $("#email_add_input").parent().addClass("has-error");
            $("#email_add_input").next("span").text("邮箱格式不正确"); */
            return false;
        } else {
            show_validate_msg("#email_add_input", "success", "");
        }
        return true;
    }


    //校验用户名是否可用
    $("#empName_add_input").change(function () {
        //发送ajax请求校验用户名是否可用
        var empName = this.value;
        $.ajax({
            url: "http://localhost:8080/srpingMVC/employeeSelect",
            data: "lastName=" + empName,
            type: "GET",
            success: function (result) {
                if (result.code == 100) {
                    show_validate_msg("#empName_add_input", "success", "用户名可用");
                    $("#emp_save_btn").attr("ajax-va", "success");
                } else {
                    show_validate_msg("#empName_add_input", "error", result.extend.va_msg);
                    $("#emp_save_btn").attr("ajax-va", "error");
                }
            }
        });
    });


    // 新增按钮功能，填写信息后通过发送ajax请求保存到数据库
    /*<![CDATA[*/
    var pages = /*[[${pageInfo.pages}]]*/ 'Sebastian';
    var pageNum = /*[[${pageInfo.pageNum}]]*/ 'Sebastian';
    /*]]>*/
    $("#emp_save_btn").click(function () {

        //1、模态框中填写的表单数据提交给服务器进行保存
        //1、先对要提交给服务器的数据进行校验
        if (!validate_add_form()) {
            return false;
        }
        ;
        //1、判断之前的ajax用户名校验是否成功。如果成功。
        if ($(this).attr("ajax-va") == "error") {
            return false;
        }

        $.ajax({
            url: "http://localhost:8080/srpingMVC/employee",
            type: "POST",
            // date: $("#submit").serialize(),
            // data:"lastName=jQueryAjax",

            data: $("#empAddModal form").serialize(),

            success: function (result) {
                $("#empAddModal").modal("hide");
                window.location.href = 'http://localhost:8080/srpingMVC/employeeCrud?pn=' + pages;
            }

        });
    });

    // 删除按钮功能
    //如果要把所有的按钮都绑上得用$(document).on("click", "#delet_btn", function ()，后面的$("#delet_btn").click(function ()只能绑定单个
    $(document).on("click", "#delet_btn", function () {
        var attr = $(this).attr("delete_id");
        let find = $(this).parents("tr").find("td:eq(1)").text(); //parents少个s找不到，这个是查找当前响应元素的所有祖先父辈元素，里面包含 tr 标签的td:eq(1) 也就是第2个元素的值
        if (confirm("你确定要删除【" + find + "】吗")) {
            $.ajax({
                url: "http://localhost:8080/srpingMVC/employeeBatchDelete/" + attr,
                type: "POST",
                data: "_method=DELETE",
                success: function (result) {

                    window.location.href = 'http://localhost:8080/srpingMVC/employeeCrud?pn=' + pageNum;
                }
            });
        }

    });

    //批量删除，批了选中功能

    $("#check_all").click(function () {
        //attr获取checked是undefined;
        //我们这些dom原生的属性；attr获取自定义属性的值；
        //prop可以修改和读取dom原生属性的值
        $(".check_item").prop("checked", $(this).prop("checked")); //根据当前点击事件查出是否选中的属性来赋值给所有class类型的单选框
    })
    //判断是否，下面的单选框满选，如果通过clas类型的单选框经过：checked过滤后 数量是等于单选框总和，那就给全选框赋值，true或者false ，这两个也能代表选择或者不选
    $(document).on("click", ".check_item", function () {
        var flag = $(".check_item").length == $(".check_item:checked").length;
        $("#check_all").prop("checked", flag)
    })

    //删除
    $("#emp_delete_modal_btn").click(function () {
        var id = "";  //这里如果不设置为空，默认会等于undefined    跟后面拼接字符的时候会加在一起：undefined5003_5005_5034
        var lastname = "";
        $.each($(".check_item:checked"), function () {

            id += $(this).parents("tr").find("td:eq(1)").text() + "_"; //查找当前循环的单选框的祖父元素，上面的所有tr ，然后选择后面的第2个td获取他的文本值
            lastname += $(this).parents("tr").find("td:eq(2)").text() + ",";
        });

        id = id.substring(0, id.length - 1);
        lastname = lastname.substring(0, lastname.length - 1);

        if (confirm("你确定要批量删除" + lastname + "吗？")) {

            $.ajax({
                url: "http://localhost:8080/srpingMVC/employeeBatchDelete/" + id,
                type: "POST",
                data: "_method=DELETE",
                success: function (result) {
                    alert(result.extend.va_msg)
                    window.location.href = 'http://localhost:8080/srpingMVC/employeeCrud?pn=' + pageNum;
                }
            })
        }
    })

    //在点击编辑按钮弹框的时候，获取当前点击按钮的同级元素的值，然后再填充到弹出框里面
    $(document).on("click", "#update_btn", function () {

        $("#empUpdateModal").modal({

            backdrop: "static"
        });
        let id = $(this).parents("tr").find("td:eq(1)").text();
        let lastname = $(this).parents("tr").find("td:eq(2)").text();
        let email = $(this).parents("tr").find("td:eq(3)").text();
        let gender = $(this).parents("tr").find("td:eq(4)").text() == "男" ? 1 : 0;

        $("#empName_update_input").val(lastname);
        $("#email_updat_input").val(email);
        $("#email_updat_input").attr("empid", id);
        if (gender == 1) {
            $("#gender1_updat_input").attr("checked", "checked");
        } else {
            $("#gender2_updat_input").attr("checked", "checked");
        }
    });
    //编辑更新原始信息，这里提交ajax老是为null 建议重启下服务器。。。
    $("#emp_update_btn").click(function () {

        //2、校验邮箱信息
        var email = $("#email_updat_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!regEmail.test(email)) {
            //alert("邮箱格式不正确");
            //应该清空这个元素之前的样式
            show_validate_msg("#email_updat_input", "error", "邮箱格式不正确");
            /* $("#email_add_input").parent().addClass("has-error");
            $("#email_add_input").next("span").text("邮箱格式不正确"); */
            return false;
        }
        let val = $("#email_updat_input").attr("empid");

        $.ajax({
            url: "http://localhost:8080/srpingMVC/employeeNew",
            type: "POST",
            // $("#submitUpdat").serialize(),   { "lastName" : "ccc" }

            data: $.param({'id': val}) + '&' + $("#submitUpdat").serialize(),

            success: function (result) {

                $("#empAddModal").modal("hide");
                window.location.href = 'http://localhost:8080/srpingMVC/employeeCrud?pn=' + pageNum;
            }
        })
    })


  function select1 () {
         var name2 = $("#select option:selected").text();
      return name2;
         let herf = $("#abq").target.href;
    }

    function select2 () {
        let name1 = $("#selectVal").text();
        return name1;
    }

</script>


</body>
</html>